<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作：针对元素增删改操作 -->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			button{
				margin: 5px;
				padding: 10px 15px ;
				cursor: pointer;
			}
			body{
				margin: 20px;
			}
			#mubiao{
				border: 1px solid red;
				padding: 10px;
				margin-top:10px;
				disp lay: none;
			}
			
			
		</style>
	</head>
	<body>
		
		
		
		

		
		
		
		
		
		
		
		
		
		
		<div id="xin" style="display: n one"><p>太好了版本前瞻</p></div>
		<button id="mw">内部末尾</button>
		<button id="kt">内部开头</button>
		<button id="qm">外部前面</button>
		<button id="hm">外部后面</button>
		<button id="sc">删除元素</button>
		<button id="qk">清空元素</button>
		<button></button>
		<div id="mubiao"><p>目标元素的初始段落</p></div>
		
		
		<script>
			$("#mw").click(function(){
				var xixi=$("#xin").clone();
				xixi.css("display","block");
				$("#mubiao").append(xixi);
			});
			
			
			$("#kt").click(function(){
				var haha=$("#xin").clone();
				haha.css("display","block");
				$("#mubiao").prepend(haha);
			});
			
			$("#qm").click(function(){
				var hehe=$("#xin").clone();
				hehe.css("display","block");
				$("#mubiao").after(hehe);
			});
			
		$("#hm").click( function(){
			var beijing=$("#xin").clone();
			beijing.css({"display":"block",
			"width":"100px",
			"height":"100px",
			"background":"url(../img/LOGO.png)",
			"color":"transparent",
			"background-size":"100% 100%"
			});
			$("#mubiao").before(beijing);
			
			
		});
			
			
			
			
			
			
			
			
			$("#sc").click(function(){
				$("#mubiao").remove();
				
			});
			
			$("#qk").click(function(){
				$("#mubiao").empty();
				
			});
			
		</script>
	</body>
</html>